define([
    'jQuery',
    'Underscore',
    'Backbone',
    'Kendo',
    'i18n!nls/language',
    'views/treespecie/tab',
    'text!templates/treespecie/tab.html',
    'views/crown/tab',
    'text!templates/crown/tab.html',
    'views/stem/tab',
    'text!templates/stem/tab.html',
    'views/root/tab',
    'text!templates/root/tab.html',
    'views/soil/tab',
    'text!templates/soil/tab.html',
    'views/health/tab',
    'text!templates/health/tab.html',
    'views/qualification/tab',
    'text!templates/qualification/tab.html'
    
], function($, 
            _, 
            Backbone, 
            Kendo, 
            i18n,
            treespecieTabView,
            treespecieTabTemplate,
            crownTabView,
            crownTabTemplate,
            stemTabView,
            stemTabTemplate,
            rootTabView,
            rootTabTemplate,
            soilTabView,
            soilTabTemplate,
            healthTabView,
            healthTabTemplate,
            qualificationTabView,
            qualificationTabTemplate
            ) {

    
                
    var settingsOverviewView = kendo.observable({
        
        
        
        // translations
        label: i18n.home.view.settings,
        
        
        
        tabClickHandler: function(e) {

console.log('er is op tab '+ e.target.id +' geclickt');
console.log(e);
            
            $(e.target).tab('show');
            
            e.preventDefault();
            
            switch (e.target.id) {
                case 'treespecie':
                    this.showTreespecieTab();
                    break;
                case 'crown':
                    this.showCrownTab();
                    break;
                case 'stem':
                    this.showStemTab();
                    break;
                case 'root':
                    this.showRootTab();
                    break;
                case 'soil':
                    this.showSoilTab();
                    break;
                case 'health':
                    this.showHealthTab();
                    break;
                case 'qualification':
                    this.showQualificationTab();
                    break;
                default:
                    alert('Dit is een onbekende tab.');
                    break;
            }
            
        },
        
        
        
        showTreespecieTab: function() {
            
            var templateTreespecie = Kendo.template(treespecieTabTemplate);
            $("#tab-content").html(templateTreespecie(treespecieTabView));
            
            Kendo.bind($("#tab-content"), treespecieTabView);
            
            treespecieTabView.renderSubviews();

        },
        
        
        
        showCrownTab: function() {
 
            var templateCrown = Kendo.template(crownTabTemplate);
            $("#tab-content").html(templateCrown(crownTabView));
            
            Kendo.bind($("#tab-content"), crownTabView);
            
            crownTabView.renderSubviews();
            
        },
        
        
        
        showStemTab: function() {
            
            var templateStem = Kendo.template(stemTabTemplate);
            $("#tab-content").html(templateStem(stemTabView));
            
            Kendo.bind($("#tab-content"), stemTabView);
            
            stemTabView.renderSubviews();
            
        },
        
        
        
        showRootTab: function() {
            
            var templateRoot = Kendo.template(rootTabTemplate);
            $("#tab-content").html(templateRoot(rootTabView));
            
            Kendo.bind($("#tab-content"), rootTabView);
            
            rootTabView.renderSubviews();
            
        },
        
        
        
        showSoilTab: function() {
            
            var templateSoil = Kendo.template(soilTabTemplate);
            $("#tab-content").html(templateSoil(soilTabView));
            
            Kendo.bind($("#tab-content"), soilTabView);
            
            soilTabView.renderSubviews();
            
        },
        
        
        
        showHealthTab: function() {
            
            var templateHealth = Kendo.template(healthTabTemplate);
            $("#tab-content").html(templateHealth(healthTabView));
            
            Kendo.bind($("#tab-content"), healthTabView);
            
            healthTabView.renderSubviews();
            
        },
        
        
        
        showQualificationTab: function() {
            
            var templateQualification = Kendo.template(qualificationTabTemplate);
            $("#tab-content").html(templateQualification(qualificationTabView));
            
            Kendo.bind($("#tab-content"), qualificationTabView);
            
            qualificationTabView.renderSubviews();
            
        },
        
        
        
        renderSubviews: function() {
            
            this.showTreespecieTab();
            
//            var templateTree = Kendo.template(treeNewTemplate);
//            $("#tree_new").html(templateTree(treeNewView));
//            
//            treeNewView.renderSubviews();
//            
//            Kendo.bind($("#tree_new"), treeNewView);
//            
//            
//            var templateInvestigation = Kendo.template(investigationNewTemplate);
//            $("#investigation_new").html(templateInvestigation(investigationNewView));
//            
//            investigationNewView.renderSubviews();
//            
//            Kendo.bind($("#investigation_new"), investigationNewView);
            
        },
        
        
        
        // self executing function acts like a constructor (hence the name)
        __construct: (function(self, window, undefined) {
            
            // do nothing right now...
            
        })(this, window)
        
            
        
    });
                
    
//    var settingsOverviewView = Backbone.View.extend({
//    
//
//        // main page element
//        el: $("#content"),
//        
//        
//        
//        initialize: function() {
//        
//            // render my own view
//            this.render();
//        
//        },  
//        
//
//
//        render: function() {
//
//            // render the main template to the main element
//            this.$el.html(settingsOverviewTemplate);
//            
//            // initiate the tabs
//            $('#settingsTab a').click(function (e) {
//                e.preventDefault();
//                $(this).tab('show');
//            })
//            
//        
//                    
//            $('#settingsTab a').on('show', function (e) {
//                
//                // console.clear();
//                // console.log(e.target);
//                // console.log(e.relatedTarget);
//                
//                // get the href attr from the activated tab
//                var tab = $(e.target).attr('href');
//                // console.log(tab);
//                
//                //
//                switch (tab) {
//                    case '#treespecie':
//                        var treespecie = new treespecieTabView();
//                        break;
//                    case '#crown':
//                        var crown = new crownTabView();
//                        break;
//                    case '#stem':
//                        var stem = new stemTabView();
//                        break;
//                    case '#root':
//                        var root = new rootTabView();
//                        break;
//                    case '#soil':
//                        var soil = new soilTabView();
//                        break;
//                    case '#health':
//                        var health = new healthTabView();
//                        break;
//                }
//                
//            });
//            
//            
//            // render the subview for the data on the first tab
//            var treespecie = new treespecieTabView();   
//
//                
//        } // render: function()
//        
//        
//    
//    });
    
    
    
    return settingsOverviewView;
    
    
    
});